<template>
	<view class="confirm-order bg-active-color">
		<!-- 预约信息 -->
		<view class="order-map">
			<view class="map-item">
				<icon class="user-icon" type="person" size="30"></icon>
				预约人: {{nickname}}
			</view>
			<view class="map-item">
				<icon class="phone-icon" type="phone" size="30"></icon>
				场馆联系方式: {{venue.phone}}
			</view>
			<view class="map-item">
				<icon class="time-icon" type="time" size="30"></icon>
				预约时间: {{bookingData.reservationTime}}
			</view>
			<view class="map-item">
				<icon class="organization-icon" type="organization" size="30"></icon>
				地址: {{courts.address}}
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="goods-content bg-active-color">
			<image class="goods-img" :src="'http://localhost:8080' + courts.imageUrl" mode="aspectFill"></image>
			<view class="goods-text">
				<view class="goods-name">
					<icon class="game-icon" type="game" size="30"></icon>
					球场名称 {{ courts.name }}
				</view>
				<view class="goods-venue f-color" style="font-size: 12px;">
					<icon class="location-icon" type="location" size="25"></icon>
					球场类型: {{ courts.type }}
				</view>
				<view class="f-active-color" style="font-size: 12px;">
					<icon class="date-icon" type="date" size="25"></icon>
					营业时间: {{ courts.businessHours }}
				</view>
			</view>
		</view>

		<view class="pay-main">
			<view class="pay-methods">
				<label class="pay-item" :class="{ 'selected': selectedPayment === 'alipay' }"
					@click="selectPayment('alipay')">
					<image class="pay-img" src="@/static/event/zfbzf.png" mode=""></image>
					<view class="pay-text-group">
						<view class="pay-title">支付宝支付</view>
						<view class="pay-txt">推荐支付宝用户使用</view>
					</view>
					<radio :value="'alipay'" :checked="selectedPayment === 'alipay'" color="#ff3333" />
				</label>
				<label class="pay-item" :class="{ 'selected': selectedPayment === 'wechat' }"
					@click="selectPayment('wechat')">
					<image class="pay-img" src="@/static/event/wxzf.png" mode=""></image>
					<view class="pay-text-group">
						<view class="pay-title">微信支付</view>
						<view class="pay-txt">推荐微信用户使用</view>
					</view>
					<radio :value="'wechat'" :checked="selectedPayment === 'wechat'" color="#ff3333" />
				</label>
			</view>
		</view>

		<view class="pay-foot">
			<view class="total">
				<text class="f-color">合计:</text>
				<text class="total-price">$ {{ calculateTotalPrice() }}</text>
			</view>
			<view class="go-pay" @click="handlePay">
				去支付
			</view>
		</view>

		<!-- 支付键盘 -->
		<view :class="{'keyboard-container': true, 'keyboard-slide-up': showPaymentKeyboard}">
			<!-- 将跳转路径传给 PaymentKeyboard -->
			<PaymentKeyboard :amount="payAmount" @key-click="handleKeyClick"
				:redirectTo="'/pages/stadium/court?venue=' + encodeURIComponent(JSON.stringify(venue))"
				@payment-success="handlePaymentSuccess(redirectTo)" @password-confirm="processPayment" />
		</view>

	</view>
</template>


<script>
	import PaymentKeyboard from '@/component/PaymentKeyboard.vue';
	import {
		updateOrderStatus
	} from '@/api/venue/venue.js'
	export default {
		data() {
			return {
				event: {},
				formData: {},
				selectedPayment: null,
				showPaymentKeyboard: false,
				orderId: '',
				venue: {},
				courts: {},
				bookingData: {},
				nickname: this.$store.state.user.nickname,
			};
		},
		components: {
			PaymentKeyboard
		},
		computed: {
			payAmount() {
				return String(this.calculateTotalPrice()); // 确保返回的是字符串
			}
		},
		onLoad(options) {
			// 参数解析
			if (options.venue) {
				this.venue = JSON.parse(decodeURIComponent(options.venue));
			}
			if (options.courts) {
				this.courts = JSON.parse(decodeURIComponent(options.courts));
			}
			if (options.bookingData) {
				this.bookingData = JSON.parse(decodeURIComponent(options.bookingData));
			}
			// 获取 orderId
			if (options.orderId) {
				this.orderId = JSON.parse(decodeURIComponent(options.orderId));
				console.log('订单 ID:', this.orderId);
			} else {
				console.error('订单 ID 获取失败');
				// 或者给用户提示
				uni.showToast({
					title: '订单 ID 获取失败',
					icon: 'none'
				});
			}

			console.log(this.courts);
			
		},
		methods: {
			calculateTotalPrice() {
				return this.bookingData.totalAmount || 0;
			},
			handlePay() {
				if (!this.selectedPayment) {
					console.log('请选择支付方式');
					return;
				}
				this.showPaymentKeyboard = true;
			},
			selectPayment(paymentMethod) {
				this.selectedPayment = paymentMethod;
				console.log('当前选择的支付方式:', paymentMethod);
			},
			handleKeyClick(key) {
				console.log('按下的键:', key);

			},

			processPayment() {
				console.log(this.orderId);
				const orderId = this.orderId
				updateOrderStatus(orderId).then(res => {
						console.log(res);
					})
					.catch(res => {
						console.log(res);
					})
			},

			// 支付成功后的处理
			handlePaymentSuccess(redirectTo) {
				console.log('支付成功，准备跳转到:', redirectTo); // 打印日志检查跳转路径
				if (redirectTo) {
					uni.navigateTo({
						url: redirectTo // 使用传递的 redirectTo 路径
					});
				} else {
					console.error('没有提供跳转路径');
				}
			},


		}
	};
</script>


<style lang="less">
	@main-bg-color: #f9f9f9;
	@card-bg-color: #fff;
	@primary-color: #49bdfb;
	@text-color: #333;
	@sub-text-color: #666;
	@border-color: #e5e5e5;
	@icon-color: #49bdfb;
	@hover-bg-color: rgba(0, 0, 0, 0.05);

	.confirm-order {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: @main-bg-color;
		padding: 30rpx;
		box-sizing: border-box;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
		display: flex;
		flex-direction: column;
	}

	.order-map {
		margin-bottom: 30rpx;
		padding: 30rpx;
		background-color: @card-bg-color;
		line-height: 60rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.order-map:hover {
		box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.12);
		background-color: @hover-bg-color;
	}

	.map-item {
		font-size: 30rpx;
		color: @text-color;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
	}

	.map-item .icon {
		margin-right: 10rpx;
		color: @icon-color;
	}

	.goods-content {
		padding: 30rpx;
		background-color: @card-bg-color;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		margin-bottom: 30rpx;
	}

	.goods-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		object-fit: cover;
	}

	.goods-text {
		flex: 1;
		margin-left: 20rpx;
	}

	.goods-name {
		font-size: 32rpx;
		color: @text-color;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.goods-venue,
	.f-active-color {
		font-size: 16rpx;
		color: @sub-text-color;
	}

	.pay-main {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.pay-methods {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.pay-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1px solid @border-color;
		cursor: pointer;
		border-radius: 10rpx;
		transition: background-color 0.2s ease;
	}

	.pay-item:hover {
		background-color: @hover-bg-color;
	}

	.selected {
		background-color: @primary-color;
		color: #fff;
	}

	.pay-img {
		width: 80rpx;
		height: 80rpx;
		object-fit: cover;
	}

	.pay-text-group {
		flex: 1;
		margin-left: 20rpx;
	}

	.pay-title {
		font-size: 28rpx;
		color: @text-color;
	}

	.pay-txt {
		font-size: 20rpx;
		color: @sub-text-color;
	}

	.pay-foot {
		padding: 30rpx;
		background-color: @card-bg-color;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		margin-top: 20rpx;
	}

	.total {
		font-size: 30rpx;
		color: @text-color;
		display: flex;
		align-items: center;
	}

	.total-price {
		font-size: 32rpx;
		color: @primary-color;
		font-weight: bold;
	}

	.go-pay {
		padding: 20rpx 40rpx;
		background-color: @primary-color;
		color: #fff;
		font-size: 32rpx;
		border-radius: 10rpx;
		cursor: pointer;
	}

	.keyboard-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 -6rpx 12rpx rgba(0, 0, 0, 0.08);
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}

	.keyboard-slide-up {
		transform: translateY(0);
	}
</style>